<template>
  <div>
    <div class="banner" v-if="type === 'none'" :style="{background: `url(${bgImg})`}">
      <div class="title" :style="titleStyle">{{title}}</div>
      <div class="desc" v-show="desc">{{desc}}</div>
      <div class="btn">
        <button :style="btnStyle">{{btnText}}</button>
      </div>
    </div>
    <swiper :class="['swiper', `${type}-swiper`]" :style="styleConfig" :options="swiperConfig" v-else-if="type === 'dot'">
      <swiper-slide :key="index" v-for="(item, index) in list"><img :src="item.src" :alt="item.desc"></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" v-show="type === 'arrow'" slot="button-prev"></div>
      <div class="swiper-button-next" v-show="type === 'arrow'" slot="button-next"></div>
    </swiper>
    <div class="arrow-banner" v-else-if="type === 'arrow'">
      <div class="title">{{title}}</div>
      <div :style="styleConfig" class="arrow-swiper">
        <el-carousel ref="mySwiper" :interval="5000" arrow="never" indicator-position="outside">
          <el-carousel-item class="item" v-for="(item, index) in list" :key="index">
            <div class="case"><img :src="item.src" :alt="item.desc"></div>
            <div class="description">
              <div class="img"><img :src="item.img" alt="logo"></div>
              <div class="title">{{item.title}}</div>
              <div class="desc">{{item.desc}}</div>
              <div class="link"><a :href="item.link" target="_blank">查看详情></a></div>
            </div>
          </el-carousel-item>
        </el-carousel>
        <button class="prev" @click="slidePrev"><img src="img/zuo.png" alt="zuo"></button>
        <button class="next" @click="slideNext"><img src="img/you.png" alt="you"></button>
      </div>
    </div>
  </div>
</template>

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'assets/css/swiper.css'

  export default {
    name: 'swiper-example-mousewheel-control',
    title: 'Mousewheel control',
    components: {
      Swiper,
      SwiperSlide
    },
    props: {
        type: {
          // 值集：none: banner无轮播作用 
          // dot: 仅有pagination切换轮播
          // arrow: 有pagination和左右箭头切换轮播
          type: String,
          default: 'dot'
        },
        styleConfig: {
          type: Object,
          default: { height: '800px' }
        },
        titleStyle: {
          type: Object,
          default: {},
        },
        btnStyle: {
          type: Object,
          default: {},
        },
        title: {
          type: String,
          default: ''
        },
        desc: {
          type: String,
          default: ''
        },
        btnText: {
          type: String,
          default: ''
        },
        bgImg: {
          type: String,
          default: ''
        },
        list: {
            type: Array,
            default: []
        }
    },
    computed: {
      swiperConfig() {
        const extra = this[`${this.type}Config`] || {};
        return { ...this.swiperOption, ...extra }
      }
    },
    mounted() {
      console.log('mounter', this.$refs.mySwiper);
    },
    data() {
      return {
        swiperOption: {
          notNextTick: true,
          slidesPerView: 1,
          spaceBetween: 30,
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          autoplay: {
              stopOnLastSlide: false
          }
        },
        dotConfig: {
          direction: 'vertical',
        },
        arrowConfig: {
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          grabCursor: true,
        }
      }
    },
    methods: {
      slidePrev() {
        this.$refs.mySwiper.prev();
      },
      slideNext() {
        this.$refs.mySwiper.next();
      }
    }
  }
</script>

<style lang="scss">
  .banner {
    width: 100%;
    height: 800px;
    background: url('/img/banner1.png') no-repeat;
    background-size: cover;
    .title {
      padding-top: 285px;
      text-align: center;
      height: 44px;
      font-size: 42px;
      font-family: PingFang SC;
      font-weight: 800;
      color: #FFFFFF;
      line-height: 65px;
    }
    .desc {
      text-align: center;
      font-size: 20px;
      margin-top: 29px;
      font-family: PingFang SC;
      color: #fff;
    }
    .btn {
      margin-top: 73px;
      display: flex;
      justify-content: center;
      button {
        width: 220px;
        height: 56px;
        background: #FFA018;
        box-shadow: 0px 10px 30px 0px rgba(38, 73, 197, 0.15);
        border-radius: 8px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 48px;
      }
    }
  }
  .swiper {
    width: 100%;
    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bold;
    }
  }
  .dot-swiper {
    .swiper-pagination-bullet {
      display: inline-block;
      width: 7px;
      height: 7px;
      background: #FFFFFF;
      border-radius: 50%;
      opacity: 1!important;
      margin: 22px 0!important;
    }
    .swiper-pagination-bullet-active {
      opacity: 1;
      width: 7px;
      height: 7px;
      background: #FFA018;
      border-radius: 50%;
      position: relative;
    }
    .swiper-pagination-bullet-active::after {
      content: '';
      width: 20px;
      height: 20px;
      border: 1px solid #FFA018;
      border-radius: 50%;
      position: absolute;
      top: -7.5px;
      left: -7.5px;
    }
    .swiper-pagination-bullets {
      left: 184px;
      top: 50%;
      -webkit-transform: translate3d(0px, -50%, 0);
      transform: translate3d(0px, -50%, 0);
    }
  }
  .arrow-banner {
    width: 100%;
    background: #205ECF;
    padding: 50px 0 78px;
    .title {
      padding: 0 0 80px;
      margin: 0 auto;
      text-align: center;
      font-size: 36px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #FFFFFF;
    }
    .arrow-swiper {
      width: 1020px;
      height: 500px!important;
      left: calc((100% - 1020px) / 2);
      position: relative;
      .item {
        height: 100%;
        display: flex;
        background: #fff;
        .case {
          width: 400px;
          height: 100%;
        }
        .description {
          flex: 1;
          box-sizing: border-box;
          padding: 35px 75px 64px 40px;
          display: flex;
          flex-wrap: wrap;
          text-align: left;
          .img {
            width: 100%;
            img {
              width: 128px;
              height: 32px;
            }
            margin-bottom: 34px;
          }
          .title {
            width: 100%;
            font-size: 20px;
            font-family: PingFangSC;
            font-weight: 400;
            color: #000000;
            line-height: 24px;
            margin-bottom: 28px;
            text-align: left;
            padding: 0;
          }
          .desc {
            width: 100%;
            font-size: 14px;
            font-family: PingFangSC;
            font-weight: 400;
            color: #999999;
            line-height: 24px;
          }
          .link {
            width: 100%;
            align-self: flex-end;
            a {
              font-size: 14px;
              font-family: PingFangSC;
              font-weight: 400;
              color: #4574F7;
              line-height: 24px;
            }
          }
        }
      }
      .prev {
        position: absolute;
        top: (320px / 2) - (67px / 2);
        left: -96px;
        width: 67px;
        height: 67px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .next {
        position: absolute;
        top: (320px / 2) - (67px / 2);
        right: -96px;
        width: 67px;
        height: 67px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>